<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <script>
         //同时发送多个请求
         let p1=new Promise((resolve,reject)=>{
             $.ajax({
                 url:'./data/1.json',
                 success:function(res){
                     resolve(res)
                 },
                 error:function(err){
                     reject(err)
                 }
             })
         })

        //  p1
        //  .then(res=>{
        //      console.log(res)
        //  })
        //  .catch(err=>{
        //      console.log(err);
        //  })

        let p2=new Promise((resolve,reject)=>{
             $.ajax({
                 url:'./data/2.json',
                 success:function(res){
                     resolve(res)
                 },
                 error:function(err){
                     reject(err)
                 }
             })
         })

        //  p2
        //  .then(res=>{
        //      console.log(res);
        //  })
        //  .catch(err=>{
        //      console.log(err);
        //  })
        

        let p3=new Promise((resolve,reject)=>{
            $.ajax({
                url:'./data/3.json',
                success:function(res){
                    resolve(res)
                },
                error:function(err){
                    reject(err)
                }
            })
        })

        // p3
        // .then(res=>{
        //     console.log(res);
            
        //     getHtml(res)
        // })
        // .catch(err=>{
        //     console.log(err);
        // })

        // function p4 () {
        //     return $.ajax({
        //         url:'./data/4.json'
        //     })
        // }

        let p4=$.ajax({url:'./data/4.json'}) // $.ajax的返回值本身就是一个promise 

        
  //all  表示所有   提前条件   p1 p2 p3 一定要是一个promise 
//   如果一个失败则拿不到数据

        Promise.all([p1,p2,p3,p4]).then(res=>{
            console.table(res)
        }).catch(err=>{
            console.log(err.responseText);
        })

        //拼接数据的函数    一个函数只做一件事件  如果需要多个事件进行处理  组装函数
        // function getHtml(id,obj,domBox,callback){
        //     let html = template(id,obj)

        //     $(domBox).html(html)
        //     callback&&callback()
        // }

        // function getManyThings(dom){
        //     getHtml(callback)
        //     getAimate(dom)
        //     getStyle(dom)
        // }

        // getManyThings() 
    </script>
</body>
</html>